<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(4, 6, 17);
            }
            .container {
                position: relative;
                width: 20px;
                height: 20px;
                transform-style: preserve-3d;/* 子元素获得3D位置。 */
                transform: perspective(500px) rotateX(50deg) translateZ(50px);/* perspective：元素距离视图的距离，以像素计 */
            }
            .container span {
                position: absolute;
                top: calc(-9px * var(--i));
                left: calc(-9px * var(--i));
                bottom: calc(-9px * var(--i));
                right: calc(-9px * var(--i));/* calc() 函数用于动态计算长度值 */
                border: 5px solid rgba(0, 162, 255, 0.8);
                box-shadow: 0 6px 0 rgb(0, 162, 255), inset 0 6px 0 rgba(0, 162, 255, 0.9);
                /* background-color: rgba(0, 162, 255,0); */
                border-radius: 50%;
                animation: move 1.5s ease-in-out infinite alternate;
                animation-delay: calc(var(--i) * 0.1s);
            }
            @keyframes move {
                0%,
                100% {
                    transform: translateZ(0px);
                }
                50% {
                    transform: translateZ(-100px);
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <span style="--i: 1"></span>
            <span style="--i: 2"></span>
            <span style="--i: 3"></span>
            <span style="--i: 4"></span>
            <span style="--i: 5"></span>
            <span style="--i: 6"></span>
            <span style="--i: 7"></span>
            <span style="--i: 8"></span>
            <span style="--i: 9"></span>
            <span style="--i: 10"></span>
        </div>
    </body>
</html>
